<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>猫与向日葵LOGO动效</title>
	<style>
		svg.mao {width: 100%; height: 79px;}
		svg.mao.animate {}
		svg.mao.txt { stroke: #69798b;}
		svg.mao text {
			stroke-width: 1px;
			/*stroke-dasharray: 30, 310;*/
			fill: none;
			text-transform: uppercase; /*转成大写*/
			font-size: 60px;
			dominant-baseline: text-before-edge; /*基线对齐方式*/
			text-anchor: start; /*文本元素对齐方式*/
			text-align: center;
			}
		svg.mao text.text1 {stroke: #3498db;text-shadow: 0 0 2px #3498db;}
		svg.mao text.text2 {stroke: #f39c12;text-shadow: 0 0 2px #f39c12;}
		svg.mao text.text3 {stroke: #e74c3c;text-shadow: 0 0 2px #e74c3c;}
		svg.mao text.text4 {stroke: #9b59b6;text-shadow: 0 0 2px #9b59b6;}
	</style>
</head>
<body>
<div>
	<a href="https://imjad.cn/"> 看官网 imjad.cn</a>
</div>
<svg class="mao animate" xmlns="http://www.w3.org/2000/svg">
	<text class="text1" x="0" y="0" stroke-dasharray="90 310">猫与向日葵1Aa
		<animate attributeName="stroke-dashoffset" begin="-2s" dur="8s" from="0" to="-400" repeatCount="indefinite"></animate>
	</text>
	<text class="text2" x="0" y="0" stroke-dasharray="90 310">猫与向日葵1Aa
		<animate attributeName="stroke-dashoffset" begin="-4s" dur="8s" from="0" to="-400" repeatCount="indefinite"></animate>
	</text>
	<text class="text3" x="0" y="0" stroke-dasharray="90 310">猫与向日葵1Aa
		<animate attributeName="stroke-dashoffset" begin="-6s" dur="8s" from="0" to="-400" repeatCount="indefinite"></animate>
	</text>
	<text class="text4" x="0" y="0" stroke-dasharray="90 310">猫与向日葵1Aa
		<animate attributeName="stroke-dashoffset" begin="-8s" dur="8s" from="0" to="-400" repeatCount="indefinite"></animate>
	</text>
</svg>
<br>
<svg class="mao txt" xmlns="http://www.w3.org/2000/svg">
	<text x="0" y="0">猫与向日葵1Aa</text>
</svg>
</body>
</html>